<template>
  <view class="index" id="index">
    <view class="header-img">
      <!-- 宝宝信息 -->
      <view class="baby-info">
        <!-- 头像+名称+年龄 -->
        <view class="baby">
          <u-image
            width="153rpx"
            height="153rpx"
            :lazy-load="true"
            :src="vuex_babyInfo.avatar"
            shape="circle"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>

          <view class="baby-i">
            <view class="baby-name">{{ babyInfo.name }}</view>
            <!-- 性别 -->
            <view>
              <image
                style="width: 24rpx; height: 24rpx; margin-right: 2rpx"
                src="@/static/index/sex.png"
                shape="circle"
              ></image>
              <view>{{ sexList[babyInfo.sex] }}</view>
            </view>
            <!-- 年龄 -->
            <view>
              <view style="margin-right: 2rpx">
                <image
                  style="width: 24rpx; height: 24rpx; margin-right: 2rpx"
                  src="@/static/index/age.png"
                  shape="circle"
                ></image>
              </view>
              <view>{{ age }}</view>
            </view>
          </view>
        </view>
        <!-- 期末报告 -->
        <view class="report">
          <view>
            <u-button
              :custom-style="customStyle"
              shape="circle"
              @click="toFinalReport"
              >期末报告</u-button
            >
          </view>
          <view>每学期末更新</view>
        </view>
      </view>

      <!-- 健康模块 -->
      <health
        v-show="isAliipcat"
        ref="HealthRef"
        :healthItem="healthItem"
        :healthData="healthData"
      ></health>
      <not-applicat v-show="!isAliipcat" ref="ApplicatRef"></not-applicat>

      <!-- 专家提示 -->
      <expert-tip :articles="articles"></expert-tip>
    </view>
  </view>
</template>

<script>
import Health from "./components/health";
import ExpertTip from "./components/ExpertTip";
import NotApplicat from "./components/notApplicat";
import { getGrowAge } from "@/common/utils";

export default {
  components: {
    Health,
    ExpertTip,
    NotApplicat,
  },
  data() {
    return {
      isAliipcat: false, //是否申请
      src: "https://s1.ax1x.com/2020/11/05/BREIu6.jpg",
      customStyle: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        height: "68rpx",
      },
      babyInfo: {}, //宝宝信息
      articles: [], //文章列表
      healthItem: [], //健康选择
      healthData: [], //健康值
      sexList: ["无", "小王子", "小公主"],
      age: "", //转化为  22岁零5月 这样的格式
    };
  },
  methods: {
    /**
     * 初始化 进来获取 数据
     */
    getIndexInfo() {
      // 获取到baby_id
      var baby_id = this.vuex_userInfo.baby_id;
      this.$u.api.getIndexApi({ baby_id: baby_id }).then((res) => {
        this.babyInfo = res.data.babyInfo; //宝宝信息
        this.articles = res.data.articles; //文章
        this.healthItem = res.data.healthItem; //健康
        this.healthData = res.data.chart_data;
        this.age = getGrowAge(res.data.babyInfo.birthday); //根据生日来获取年龄
        //判断是否申请
        if (res.data.total_avg != 0) {
          this.isAliipcat = true;
        }
        //宝宝信息
        this.$u.vuex("vuex_babyInfo", res.data.babyInfo);
        //健康item
        this.$u.vuex("vuex_healthItem", res.data.healthItem);
        // uni.hideLoading();
      });
    },

    /**
     * 去期末报告
     */
    toFinalReport() {
      //首先判断该孩子是否检测
      if (this.isAliipcat) {
        uni.navigateTo({
          url: "/pages/finalReport/finalReport",
        });
      } else {
        uni.showToast({
          title: "孩子还未加入测评哦！",
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
  created() {
    // uni.showLoading({
    //   title: "初始化数据",
    // });
    // setTimeout(() => {
    console.log(this.vuex_userInfo);

    if (this.vuex_userInfo != {} && this.vuex_userInfo.baby_id != 0) {
      this.getIndexInfo();
    } else {
      uni.reLaunch({
        url: "/pages/regist/register",
      });
    }
    // }, 1000);
  },
};
</script>

<style scoped lang ='scss' >
.index {
  background-color: #f7f7f7;
  min-height: 93vh;
  .header-img {
    background-image: url("@/static/index/header.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 50rpx 20rpx;
    height: auto;
    .baby-info {
      height: 220rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 18 * 2rpx 15.5 * 2rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .baby {
        display: flex;
        flex-direction: row;
        align-items: center;
        .baby-i {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          .baby-name {
            color: #000000;
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          & > view:nth-child(2),
          & > view:nth-child(3) {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #000000;
            font-size: 24rpx;
            margin-bottom: 5rpx;
          }
        }
      }
      .report {
        text-align: center;
        & > view:nth-child(1) {
          width: 180rpx;
        }
        & > view:nth-child(2) {
          margin-top: 5rpx;
          color: #999999;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
